import React from "react";
import {
  Form,
  Input,
  Button,
} from 'antd';
class ModifyKill extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      killInfo: {
        people: "",
        price: "",
        startdate:"",
        enddate:"",
        repository:"",
        description:"",
        name: ""
      },
    }
  }
  UNSAFE_componentWillMount() {
    this.setState({
      killInfo: this.props.data
    })
  }

  const
  formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 5,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 16,
      },
    },
  };
  const
  tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  render() {
    return (
        <Form
            {...this.formItemLayout}
            onFinish={this.props.handleOk}
            initialValues={
              {
                // eslint-disable-next-line
                ["name"]: this.state.killInfo.name,
                // eslint-disable-next-line
                ["people"]: this.state.killInfo.people,
                // eslint-disable-next-line
                ["price"]: this.state.killInfo.price,
                // eslint-disable-next-line
                ["startdate"]: this.state.killInfo.startdate,
                // eslint-disable-next-line
                ["enddate"]: this.state.killInfo.enddate,
                // eslint-disable-next-line
                ["repository"]: this.state.killInfo.repository,
                // eslint-disable-next-line
                ["description"]: this.state.killInfo.description,
              }
            }
        >
          <Form.Item
              name="name"
              label="商品名称"
          >
            <Input disabled />
          </Form.Item>
          <Form.Item label="活动日期" style={{ marginBottom: 0 }}>
            <Form.Item
                name="startdate"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <Input disabled />
            </Form.Item>
            <span
                style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }}
            >
            -
            </span>
            <Form.Item
                name="enddate"
                style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}
            >
              <Input disabled />
            </Form.Item>
            {/*<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>*/}
            {/*  <DatePicker />*/}
            {/*</Form.Item>*/}
          </Form.Item>
          <Form.Item
              name="people"
              label="团购人数"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '团购人数必须为数字',
                },
                {
                  required: true,
                  message: '请输入团购人数',
                },
              ]}
              hasFeedback
          >
            <Input/>
          </Form.Item>
          <Form.Item
              name="price"
              label="秒杀价格"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '秒杀价格必须为数字',
                },
                {
                  required: true,
                  message: '请输入秒杀价格',
                },
              ]}
              hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
              name="repository"
              label="秒杀库存"
              rules={[
                {
                  pattern: new RegExp(/^[1-9]\d*$/),
                  message: '秒杀库存必须为数字',
                },
                {
                  required: true,
                  message: '请输入秒杀库存',
                },
              ]}
              hasFeedback
          >
            <Input />
          </Form.Item>
          <Form.Item
              name="description"
              label="秒杀规则"
              rules={[
                {
                  required: true,
                  message: '请输入秒杀规则',
                },
              ]}
              hasFeedback
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item
              wrapperCol={{
                xs: { span: 24, offset: 0 },
                sm: { span: 16, offset: 5 },
              }}
          >
            <Button type="primary" htmlType="submit" style={{margin:'0 40px'}} >确认</Button>
            <Button type="primary" onClick={this.props.handleCancel} >取消</Button>
          </Form.Item>
        </Form>
    )
  }
}
export default ModifyKill